<template>
  <div class="father">
      <Header>
       
      </Header>
      <el-container>
        <el-aside width="200px">
          
          <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1" active-text-color="#ffffff">
              <i class="el-icon-box"></i>
             <router-link to="/home/workplace">
               工作台           
            </router-link>
        
              </el-menu-item> 
              
           
            <el-menu-item index="2">
              
              <router-link to="/home/bin"><i class="el-icon-delete"></i> 回收站</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-monitor"></i>
              <router-link to="/home/mydesktop">我的桌面</router-link>
              
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-user"></i>
              <router-link to="/home/team">团队空间</router-link>
            
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-document"></i>
              <router-link to="/home/help">帮助</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>

        <el-aside width="200px" class="right-menu">
        <el-row>
          <el-button @click="handleCreate1" type="primary" class="button1">创建新文档</el-button>
          <br>
          <el-button @click="handleCreate1" type="primary"  class="button2" >基于模板创建</el-button>
          <br>
<!--          <el-button type="primary" @click="handleCreateTeam" round size="medium">基于模板创建</el-button>-->
        </el-row>
      </el-aside>
  </el-container>




   </div>
  
      
</template>

<script>
import Header from '../components/Header'
import {mapState,mapActions} from 'vuex'
export default {
  name: "homepage",
  data(){
    return{
      input:""
    }
  },
  async mounted () {
      await this.recordPrivateMessageList(this.userInfo.userid)
      await this.recordCommentMessageList(this.userInfo.userid)
      await this.recordTeamMessageList(this.userInfo.userid)
  },

  computed:{
    ...mapState([
      'userList',
      'articleList',
      'userInfo',
      'teamMessageList',
      'commentMessageList',
      'privateMessageList']),
  },
  

  components:{Header},

  methods: {
    handleCreate1:function(){
      console.log(111);
      this.$router.replace('/edit');
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    goToSearchResult(){

    },
    
  },

  
/* eslint-disable */

  
  data() {
    return {};
  },
  mounted() {
    
  },
};
</script>
<style scoped>

.father .el-container {
  height: 700px;
}

.el-button {
  display: right;
  margin: auto 0;
  height: 40px;
  background-color: rgb(250, 245, 249);
  float: right;
}
.el-header {
  background-color: #373d41;
  display: flex;
  
}
.title {
  display: block;

  color: #f5fcf7;
  font-size: 40px;
  float: left;

}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
  
}

.el-menu-item.is-active{
  background-color: blue;
}
.router-link-exact-active{
    /* 路由点击后的样式 */

    /* 添加需要的样式 */
   /*  color:white;*/
     text-decoration:none;
}
a{color:inherit; font:inherit;}
.router-link-exact-active:hover,:link,:active{
    /* 路由点击后的样式 */

    /* 添加需要的样式 */
   /*  color:white;*/
     text-decoration:none;
}

.router-link-exact-active:visited{     
     text-decoration:none;
}

.right-menu{
  background-color: #fff;
  text-align: center
}

.button1{
  width: 150px;
  color: #5a5a5acc ;
  border: #5a5a5acc solid 1px;
  position: absolute;
  left: 30px;
  top: 30px;
  background-color: rgb(247, 247, 247);
}
.button2{
  width: 150px;
  color: #5a5a5acc ;
  border: #5a5a5acc solid 1px;
  position: absolute;
  left: 30px;
  top: 90px;
  background-color: rgb(247, 247, 247);
}
.button1:hover,.button2:hover{
  background-color: rgba(221, 225, 230, 0.726);
  color: #5da1da;
  font:bolder;
}

</style>